<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{ padding: 0; margin: 0 ;list-style-type: none;}
        .cont{display: grid; grid-template-columns: 1fr 1fr; grid-gap:10px; height: 800px; position: relative; padding:50px;}
        .cleft{background:red;}
        .cright{background: green; width: 50%; height: 50%;}
        .diolag{width:0px; height: 0px;position: absolute; transition: all 1s; border: 4px dashed #333;}
        .overs{ position:relative; z-index: 1;}
    </style>
</head>
<body>
    <div class="cont">
         <div class="cleft kkxuanfu"><div class="overs">123</div></div>
         <div class="cright kkxuanfu"><div class="overs">123</div></div>
         <div class="cleft kkxuanfu"><div class="overs">123</div></div>
         <div class="cright kkxuanfu"><div class="overs">123</div></div>
         <div class="cleft kkxuanfu"><div class="overs">123</div></div>
         <div class="cright kkxuanfu"><div class="overs">123</div></div>
         <div class="cleft kkxuanfu"><div class="overs">123</div></div>
    </div>
    <div class="diolag"></div>
    <script>
        let divs = document.querySelectorAll('.kkxuanfu');
        let diolag = document.querySelector('.diolag');
        let cont = document.querySelector('.cont');
        for(let i=0;i<divs.length;i++){
            divs[i].addEventListener('mouseover',function(e){
                diolag.style.opacity=1;
                let Widthcont = this.offsetWidth;
                let Heightcont = this.offsetHeight;
                let pageXs = this.offsetLeft;
                let pageYs = this.offsetTop;
                
                diolag.style.width= Widthcont+'px';
                diolag.style.height= Heightcont+'px';
                diolag.style.left= pageXs - 4+'px';
                diolag.style.top= pageYs - 4+'px';
            })
            divs[i].addEventListener('mouseout',function(e){
                diolag.style.opacity=1;
            })
        }
    </script>
</body>
</html>